<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="assets/i/favicon.png"/>
    <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>招财猫</h1>
        <p>网关管理后台<br/></p>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">
        <h3>登录</h3>
        <hr/>
        <div class="am-btn-group">
            <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>
            <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i>
                Google+</a>
            <a href="#" class="am-btn am-btn-primary am-btn-sm"><i class="am-icon-stack-overflow am-icon-sm"></i>
                stackOverflow</a>
        </div>
        <br/>
        <br/>

        <form method="post" class="am-form">
            <label for="username">用户名:</label>
            <input type="email" name="" id="username" value=""/>
            <br/>
            <label for="password">密码:</label>
            <input type="password" name="" id="password" value=""/>
            <br/>
            <label for="remember-me">
                <input id="remember-me" type="checkbox"/>
                记住密码
            </label>
            <br/>
            <div class="am-cf">
                <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl"
                       onclick="login();return false"/>
                <!--
                                <input type="submit" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fr">
                -->
            </div>
        </form>
        <hr/>
        <p>© fortune-cat - Unified gateway</p>
    </div>
</div>
<script th:src="@{assets/js/jquery.min.js}"></script>
<script>
    $(function () {
        if (self != top) {
            parent.location.reload();
        }
    });

    function login() {
        var userName = $("#username").val();
        var passWord = $("#password").val();
        if (!check(userName, passWord)) {
            alert("用户名和密码不能为空")
            return false;
        }
        $.ajax({
            url: "/fortune/cat/user/login",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({ 'userName': userName, 'passWord': passWord }),
            dataType: "json",
            success: function (data) {
                if (data['code'] != "200") {
                    alert("用户名或密码错误")
                    return;
                }
                window.location.href = "/index";
            }
        });
    }

    function check(username, password) {
        if (username == "" || username == null) {
            return false;
        }
        if (password == "" || password == null) {
            return false;
        }
        return true;
    }
</script>
</body>
</html>